<template>
  <section class="h5-wrap">
    <div class="header">
      <!-- time -->
      <div class="treasure f-r ai-c">
        <van-icon name="calendar-o" :size="26" />
        <div class="time">
          <span class="day">{{ day }}</span>
          <span>/ {{ month }}</span>
        </div>
      </div>
      <!-- bar -->
      <van-notice-bar
        background="transparent"
        color="#a26a6a"
        left-icon="volume-o"
        class="notice"
        :scrollable="false"
      >
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="(item, index) in sentence"
            :key="index"
          >
            {{ item }}
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>

      <ul class="entrys f-r ai-c jc-sb">
        <li
          v-for="(item, index) in entrys"
          :key="index"
          @click="entryClickHandler(item)"
        >
          <van-icon :name="item.icon" :size="20" />
          <p>{{ item.label }}</p>
        </li>
      </ul>
    </div>

    <van-swipe
      :autoplay="3000"
      :height="160"
      indicator-color="#a26a6a"
      class="swipe"
    >
      <van-swipe-item 
        v-for="(item, index) in images" 
        :key="index"
        @click="entryClickHandler(item)"
      >
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>

    <van-grid square :gutter="10" class="points">
      <van-grid-item
        v-for="(item, index) in points"
        :key="index"
        :icon="item.icon || item.pic || 'photo-o'"
        :text="item.label"
        @click="entryClickHandler(item)"
      />
    </van-grid>

    <BottomNavigation />
  </section>
</template>
<script>
import arkever from 'arkever'
import { BottomNavigation } from '@/components'
import { SENTENCE } from '@/assets/const'
export default {
  name: 'HOME',
  components: {
    BottomNavigation
  },
  data () {
    return {
      sentence: SENTENCE,
      entrys: [{
        label: '写作',
        icon: 'edit',
        url: ''
      }, {
        label: '阅读',
        icon: 'bar-chart-o',
        url: ''
      }, {
        label: '影片',
        icon: 'star-o',
        url: ''
      }, {
        label: '禁止',
        icon: 'warn-o'
      }],
      images: [{
        img: require('@/assets/img/index/swipe0.jpeg'),
        url: ''
      }, {
        img: require('@/assets/img/index/swipe0.jpeg'),
        url: ''
      }],
      points: [
      {
        label: '工具箱',
        icon: 'gift-o',
        url: 'index'
      }, {
        label: '个税',
        icon: 'smile-o',
        url: 'taxcalc'
      }, 
      {
        label: '练习场',
        icon: 'fire-o',
        url: ''
      }, {
        label: '作品集',
        icon: 'share-o',
        url: ''
      }, {
        label: '朋友',
        icon: 'friends-o',
        url: ''
      }, {
        label: '3D相册',
        icon: 'fire-o',
        url: ''
      },
      {
        label: '曾经',
        icon: 'like-o',
        url: ''
      }, {
        label: '璀璨',
        icon: 'gem-o',
        url: ''
      }]
    }
  },
  computed: {
    day: function () {
      return arkever.formatDate(new Date(), 'dd')
    },
    month: function () {
      return arkever.formatDate(new Date(), 'MM月')
    }
  },
  methods: {
    entryClickHandler (item) {
      if (!item.url) {
        this.$toast('敬请期待')
        return
      }
      this.$Jump2(item.url)
    }
  }
}
</script>
<style lang="less" scoped>
section {
  min-height: 100vh;
  .header {
    background: linear-gradient(1turn,hsla(0,0%,100%,.42),rgba(253,253,255,.42) 40%,#fdfdff 42%,rgba(170,197,255,.42));
    padding: 20px 16px 0;
    .treasure {
      .time {
        padding-left: 6px;
        font-size: 10px;
        .day {
          font-size: 26px;
          font-weight: bold;
        }
      }
    }
    .notice {
      margin: 8px 0;
      padding: 0;
      .notice-swipe {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
      }
    }
    .entrys {
      padding: 12px 2px 24px;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        p {
          font-size: 16px;
          line-height: 20px;
          margin-top: 2px;
        }
      }
    }
  }

  .swipe {
    img {
      width: 100%;
      height: 160px;
    }
  }

  .points {
    padding: 12px 0 0;
  }
}
</style>
